<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <h1>调查问卷</h1>
    <form>
        <label>姓名:</label><input type="text" class="username" /><br/><br/>
        <label>年龄：</label>
        <select class="age">
            <option>20</option>
            <option>21</option>
            <option>22</option>
            <option>23</option>
        </select><br/>
        <label>爱好：</label>
        <input type="checkbox" name="hobby" class="hobby" value="游泳" />游泳
        <input type="checkbox" name="hobby" class="hobby" value="打球" />打球
        <input type="checkbox" name="hobby" class="hobby" value="打咏春" />打咏春
        <input type="checkbox" name="hobby" class="hobby" value="跑步" />跑步
        </br/>
        <label>性别：</label>
        <input type="radio" name="ssex" value="男" checked="true" />男
        <input type="radio" name="ssex" value="女" />女<br/>
        <label>建议：</label><textarea></textarea>
    </form>
    <button>提交</button>
</body>
<script>
    window.onload = function() {
        var btn = document.querySelector("button");
        btn.addEventListener("click", function(e) {
            var form = document.getElementsByTagName("form");
            var username = form[0].getElementsByClassName("username");
            console.log("姓名:" + username[0].value);

            var age = form[0].getElementsByClassName("age");
            console.log("年龄:" + age[0].value);

            var ssex = document.getElementsByName("ssex")
            var cur = "";
            for (var i = 0; i < ssex.length; i++) {
                if (ssex[i].checked === true) {
                    cur = ssex[i].value;
                    break;
                }
            }
            console.log("性别:" + cur);

            var hobby = document.getElementsByName("hobby");
            var arr = "";
            for (var i = 0; i < hobby.length; i++) {

                if (hobby[i].checked == true) {
                    arr = hobby[i].value + arr;
                } else {
                    arr = arr + "," + hobby[i].value;
                }
            }
            console.log("爱好:" + arr);
            var textarea = form[0].getElementsByTagName("textarea");
            console.log("建议:" + textarea[0].value);

        })
    }
</script>

</html>